<template>
    <div class="header">
        <div class="head-left">
            <img src="../public/img/yuejitext.png" alt="">
        </div>
        <div class="head-right">
            <!-- <div class="search">
                <input type="text" autocomplete="off" placeholder="搜索关键字">
                <img src="../public/img/shoucuo.png" alt="">
            </div> -->
            <!-- <div>
                <span>shelly</span>
                <span class="el-icon-arrow-down btn"></span>
                <div class="user">
                    <ul>
                        <li><img src="" alt=""><span>个人资料</span></li>
                        <li><img src="" alt=""><span>修改密码</span></li>
                        <li><img src="" alt=""><span>切换账号</span></li>
                        <li><img src="" alt=""><span>安全退出</span></li>
                    </ul>
                    <div></div>
                </div>
            </div> -->
            <el-dropdown trigger="click">
                <span class="el-dropdown-link dropdown">
                    {{distribution}}<i class="el-icon-arrow-down el-icon--right btn"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="menu">
                    <el-dropdown-item class="item" @click.native="$router.push('/home/setup/personal')"><span>个人资料</span></el-dropdown-item>
                    <el-dropdown-item class="item" @click.native="$router.push('/home/setup/personal?three=three')"><span>修改密码</span></el-dropdown-item>
                    <el-dropdown-item class="item" @click.native="$router.push('/home/setup/changeaccount')"><span>切换账号</span></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
export default {
  name: "fixheader",
  data() {
    return {
        distribution:''
    };
  },

  mounted: function() {},
  methods: {},
  created(){
      this.distribution=JSON.parse(localStorage.userInfo).distribution;
  }
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  background-color: #36a4ff;
  z-index: 999;
  position: fixed;
  top: 0px;
}
.header .head-left {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 30px;
}
.header .head-left img {
  height: 25px;
}
.head-right {
  position: relative;
  padding-right: 50px;
  display: flex;
  justify-content: space-between;
}
.search {
  width: auto;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 262px;
}
.search > input {
  width: 340px;
  height: 38px;
  background-color: #358dd6;
  padding: 12px 0 12px 8px;
  border: 0;
  border-radius: 6px;
  font: 14px/0px "微软雅黑";
  text-indent: 1em;
  position: relative;
  color: #fff;
  box-sizing: border-box;
}

input:-ms-input-placeholder {
  color: #fff;
  opacity: 1;
}

input::-webkit-input-placeholder {
  color: #fff;
  opacity: 1;
}

.search > img {
  width: 25px;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.head-right .dropdown {
  width: 130px;
  height: 100%;
  background: #239afc;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.head-right .dropdown:hover {
  background: #0d90fd;
  cursor: pointer;
}
.head-right .dropdown span:last-child {
  margin-right: 7px;
}
.head-right .dropdown .btn {
  width: 19px;
  height: 17px;
  background: #fff;
  color: #239afc;
  border-radius: 2px;
  text-align: center;
  line-height: 17px;
  box-sizing: border-box;
}
.menu .item span {
    display: flex;
    align-items: center;
}
.menu .item span:before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../public/img/head-11.png);
    background-size: cover;
    margin-right: 4px;
}
.menu .item:nth-child(2) span:before {
    background-image: url(../public/img/head-22.png);
}
.menu .item:nth-child(3) span:before {
    background-image: url(../public/img/head-33.png);
}
.menu .item:nth-child(4) span:before {
    background-image: url(../public/img/head-44.png);
}
.menu .item:nth-child(1):hover span:before {
    background-image: url(../public/img/head-1.png);
}
.menu .item:nth-child(2):hover span:before {
    background-image: url(../public/img/head-2.png);
}
.menu .item:nth-child(3):hover span:before {
    background-image: url(../public/img/head-3.png);
}
.menu .item:nth-child(4):hover span:before {
    background-image: url(../public/img/head-4.png);
}

</style>